<template>
  <div class="loginbox" style="width:100%;">
    <div class="loginboxin mt40">
      <div style="width:30%;">
        <div class="login-tit">
          <span class="fs16">云+物娱娃娃机后台管理系统</span>
        </div>
        <div class="loginform" :label-position="labelPosition" :model="formLabelAlign">
          <div class="formlist">
            <input v-model="formLabelAlign.username">
            <span class="formuser"></span>
          </div>
          <div class="formlist">
            <input type="password" v-model="formLabelAlign.password">
            <span class="formpsw"></span>
          </div>
          <div class="formactout">
            <div class="formactive">
              <button class="login-btn" @click="loginfn"></button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import api from '../../assets/js/api'

  export default {
    name: "login",
    data() {
      return {
        labelPosition: 'left',
        loginData:new FormData(),
        formLabelAlign: {
          username: '',
          password: ''
        }
      }
    },
    methods: {
      loginfn: function () {
        if (this.formLabelAlign.username == '') {
          this.$message.error('账号不能为空！');
        }else if(this.formLabelAlign.password == ''){
          this.$message.error('密码不能为空！');
        }else{
          this.loginData.append("username", this.formLabelAlign.username);
          this.loginData.append("password", this.formLabelAlign.password);
          api.fetch('/api/admin/account/login',
            {
              method: 'post',
              data: this.loginData
            })
            .then(res => {
              let tokenVal = res.data.api_token;
              window.sessionStorage.setItem('token', tokenVal);
                this.$router.push('/')
            }).catch((error) => {
              this.$message.error(error.response.data.message);
          })
        }
      }
    }
  }
</script>

<style scoped>
  .login-tit {
    color: #20a0ff;
  }

  .loginbox {
    background: url("../../assets/images/loginbg.jpg") no-repeat;
    background-size:100% 100%;
    text-align: center;
    width:100%;
    height:100%;
    margin: 0 auto;
  }

  .loginboxin {
    padding-left:112px;
    background: url("../../assets/images/logininbg.png") no-repeat;
    background-size:100% 100%;
    width:1098px;
    height:680px;
    padding-top:260px;
    box-sizing: border-box;
    box-shadow: 0px 0px 30px #7cc3f8;
    position:absolute;
    left:50%;
    margin-left:-549px;
    top:50%;
    margin-top:-340px;
  }
  .login-tit{
    width:100%;
    height:1px;
    background: #b3b3b3;
    position: relative;
    margin-bottom:66px;
    text-align:center;
  }
  .login-tit span{
    background:#fff;
    color:#b3b3b3;
    position: relative;
    top:-8px;
    padding:0 20px;
  }
  .formlist{
    position: relative;
    margin-bottom:18px;
  }
  .formlist span{
    position:absolute;
    display: block;
    width:46px;
    height:46px;
    left:0;
    top:50%;
    margin-top:-23px;
    border-right:1px solid #e1e4eb;
  }
  .formlist .formuser{
    background:url("../../assets/images/user.png") no-repeat center center;
  }
  .formlist .formpsw{
    background:url("../../assets/images/psw.png") no-repeat center center;
  }
  .formlist input{
    border-radius:4px;
    border:1px solid #e1e4eb;
    width:100%;
    height:46px;
    line-height:46px;
    padding-left:64px;
    box-sizing: border-box;
  }
  .formactout{
    padding-top:22px;
  }
  .formactive{
    padding-top:40px;
    text-align: left;
    border-top:1px dashed #e1e4eb;
  }
  .login-btn{
    width:160px;
    height:59px;
    background: url("../../assets/images/login-btn.png") no-repeat center center;
    border:none;
  }
  .login-btn:active,.login-btn:focus{
    outline: none;
  }
</style>
